<template>
  <div class="container">
    <top-header :navIndex="1"></top-header>
    <div class="map"></div>
    <div class="left_top">
      <div class="title">
        <p>
          <img src="../../assets/screen/mlxc/hxcjg.png" alt="" />
        </p>
        <p>两委干部分工表</p>
      </div>
      <ul class="details">
        <li>
          <p>火星村</p>
          <p>&nbsp;党委</p>
        </li>
        <li>
          <p>&nbsp;村民</p>
          <p>委员会</p>
        </li>
        <li>
          <p>村务监督</p>
          <p>&nbsp;委员会</p>
        </li>
        <li>
          <p>&nbsp;村股份</p>
          <p class="fs_13">经济合作社</p>
        </li>
        <li>
          <p>火星村</p>
          <p>&nbsp;纪委</p>
        </li>
      </ul>
    </div>
    <div class="left_mid">
      <div class="mid_title">
        <p>
          <img src="../../assets/screen/mlxc/cunqing.png" alt="" />
        </p>
        <p>
          <img
            src="../../assets/screen/mlxc/cq_ewm.png"
            class="cunqingwem"
            alt=""
          />
        </p>
      </div>
      <ul class="mid_boder">
        <li>
          <img src="../../assets/screen/mlxc/home_icon.png" alt="" />
          <div>
            <p class="p1">总户数</p>
            <p>
              <span class="p2">933</span>
              <span class="p3">户</span>
            </p>
          </div>
        </li>
        <li>
          <img src="../../assets/screen/mlxc/renkou.png" alt="" />
          <div>
            <p class="p1">总人口</p>
            <p>
              <span class="p2">3427</span>
              <span class="p3">人</span>
            </p>
          </div>
        </li>
        <li>
          <img src="../../assets/screen/mlxc/dangyuan.png" alt="" />
          <div>
            <p class="p0">党员人数</p>
            <p>
              <span class="p2">135</span>
              <span class="p3">人</span>
            </p>
          </div>
        </li>
        <li>
          <img src="../../assets/screen/mlxc/shouru.png" alt="" />
          <div>
            <p class="p0">人均收入</p>
            <p>
              <span class="p2">3867</span>
              <span class="p3">元</span>
            </p>
          </div>
        </li>
        <li>
          <img src="../../assets/screen/mlxc/shouru-2.png" alt="" />
          <div>
            <p class="p0">集体收入</p>
            <p>
              <span class="p2">103</span>
              <span class="p3">万</span>
            </p>
          </div>
        </li>
        <li>
          <img src="../../assets/screen/mlxc/home_icon.png" alt="" />
          <div>
            <p class="p0">美丽家庭</p>
            <p>
              <span class="p2">135</span>
              <span class="p3">人</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="left_bottom">
      <div class="bottom_title">
        <p>
          <img src="../../assets/screen/mlxc/gg.png" alt="" />
        </p>
      </div>
      <ul>
        <li>
          <span>关于做好外来区县不明人员疫情防控工作</span>
          <span>21-8-05</span>
        </li>
        <li>
          <span>关于做好外来区县不明人员疫情防控工作</span>
          <span>21-8-05</span>
        </li>
        <li>
          <span>关于做好外来区县不明人员疫情防控工作</span>
          <span>21-8-05</span>
        </li>
        <li>
          <span>关于做好外来区县不明人员疫情防控工作</span>
          <span>21-8-05</span>
        </li>
        <li>
          <span>关于做好外来区县不明人员疫情防控工作</span>
          <span>21-8-05</span>
        </li>
      </ul>
    </div>
    <div class="right_top">
      <div class="title">
        <p>
          <img src="../../assets/screen/mlxc/meijing.png" alt="" />
        </p>
        <div class="swiper-container xc">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../../assets/screen/mlxc/xc1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../../assets/screen/mlxc/xc1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../../assets/screen/mlxc/xc1.png" alt="" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
        <p class="introduce">
          中国传统历法中的大年初一，称为元旦，即新年的
          第一天这一天，无论皇帝还是京城的百官都早早就
          起身了，因为一大早，群臣们就要汇集到京城的中
          心——紫禁城中的金銮宝殿前向皇帝“拜年”。 这就是元旦大朝贺的盛大典礼。
          宝殿前向皇帝“拜年”。这就是元旦大朝贺的盛大
          典礼宝殿前向皇帝“拜年”。这就是元旦大朝贺
        </p>
      </div>
    </div>
    <div class="right_bottom">
      <div class="rightbottom_title">
        <p>
          <img src="../../assets/screen/mlxc/groupHomor.png" alt="" />
        </p>
      </div>
      <div class="tip">
        <span>排名</span>
        <span>奖项名称</span>
      </div>
      <ul>
        <li>
          <span>
            <img src="../../assets/screen/mlxc/pm1.png" alt="" />
          </span>
          <span>最美乡村</span>
        </li>
        <li>
          <span> <img src="../../assets/screen/mlxc/pm2.png" alt="" /> </span>
          <span>最美乡村</span>
        </li>
        <li>
          <span><img src="../../assets/screen/mlxc/pm2.png" alt="" /></span>
          <span>最美乡村</span>
        </li>
        <li>
          <span><img src="../../assets/screen/mlxc/pm4.png" alt="" /></span>
          <span>最美乡村</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import topHeader from "@/components/screen/topHeader.vue";
import Swiper from "swiper";

// 全局大屏1920*1080自适配
import "../../utils/screen/common";
import $ from "jquery";
export default {
  components: {
    topHeader,
  },
  data() {
    return {};
  },
  methods: {
    initSwiper() {},
    ininSwiper() {
      var mySwiper = new Swiper(".swiper-container", {
        pagination: {
          el: ".swiper-pagination",
        },
      });
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.ininSwiper();
  },
};
</script>
<style lang="scss" scoped>
@import url(../../style/reset.css);
@import "../../../node_modules/swiper/swiper.min.css";

.container {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/screen/index/Bg.png);
  position: relative;
}

.introduce {
  color: #fff;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.1em;
  overflow: hidden;
  　text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.right_bottom {
  position: absolute;
  top: 730px;
  right: 50px;
  width: 455px;
  height: 320px;
  padding: 20px;
  background: url(../../assets/screen/mlxc/small_shadow.png) no-repeat;
  background-size: 100% 100%;
}

.left_bottom ul li {
  list-style: disc;
  height: 40px;
  width: 100%;
  font-weight: 600;
  background: url("../../assets/images/bottomline.png") no-repeat 0px 30px;
}

.left_bottom ul {
  padding: 30px;
}

.left_bottom ul li span:nth-child(1) {
  display: inline-block;
  float: left;
}

.left_bottom ul li span:nth-child(2) {
  display: inline-block;
  float: right;
}

.left_top {
  position: absolute;
  top: 220px;
  left: 50px;
  width: 555px;
  padding: 20px;
  height: 156px;
  background: url(../../assets/screen/mlxc/small_shadow.png) no-repeat;
  background-size: 100% 100%;
}

.left_mid {
  position: absolute;
  top: 400px;
  left: 50px;
  width: 555px;
  height: 300px;
  padding: 20px;
  background: url(../../assets/screen/mlxc/small_shadow.png) no-repeat;
  background-size: 100% 100%;
}

.left_bottom ul li {
  color: #fff;
}

.title {
  width: 100%;
  overflow: hidden;
}

.mid_title {
  width: 100%;
  overflow: hidden;
}

.bottom_title {
  width: 100%;
  overflow: hidden;
}

.rightbottom_title {
  width: 100%;
  overflow: hidden;
}

.rightbottom_title p:nth-child(1) {
  float: left;
  font-size: 24px;
  color: #00fcff;
  text-indent: 1em;
  background: url("../../assets/screen/mlxc/rongyu.png") no-repeat 0 -2px;
}

.rightbottom_title p:nth-child(1) img {
  position: relative;
  bottom: 0px;
  left: 15px;
}

.bottom_title p:nth-child(1) {
  float: left;
  font-size: 24px;
  color: #00fcff;
  text-indent: 1em;
  background: url(../../assets/screen/mlxc/icon2.png) no-repeat;
}

.bottom_title p:nth-child(1) {
  float: left;
  font-size: 24px;
  color: #00fcff;
  text-indent: 1em;
  background: url(../../assets/screen/mlxc/xx.png) no-repeat;
}

.bottom_title p:nth-child(1) img {
  position: relative;
  bottom: 0px;
  left: 15px;
}
.tip {
  width: 100%;
  color: #fff;
  margin-bottom: 20px;
}
.tip span:nth-child(1) {
  display: inline-block;
  margin-left: 35px;
}
.tip span:nth-child(2) {
  display: inline-block;
  margin-left: 195px;
}
.right_bottom ul {
  padding: 0px 0 0 40px;
}
.right_bottom ul li span:nth-child(1) {
  display: inline-block;
  margin-right: 200px;
}
.right_bottom ul li span:nth-child(2) {
  position: relative;
  bottom: 7px;
  display: inline-block;
  height: 20px;
}
.right_bottom ul li {
  margin-bottom: 20px;
  color: #fff;
}

.mid_title p:nth-child(1) {
  float: left;
  font-size: 24px;
  color: #00fcff;
  text-indent: 1em;
  background: url(../../assets/screen/mlxc/icon2.png) no-repeat;
}

.mid_title p:nth-child(1) img {
  position: relative;
  bottom: 0px;
  left: 15px;
}

.mid_title p:nth-child(2) {
  float: right;
}

.title p:nth-child(1) {
  float: left;
  font-size: 24px;
  color: #00fcff;
  text-indent: 1em;
  background: url(../../assets/screen/mlxc/icon1.png) no-repeat;
}

.title p:nth-child(1) img {
  position: relative;
  bottom: 6px;
  right: 3px;
}

.map {
  position: absolute;
  top: 220px;
  left: 620px;
  width: 772px;
  height: 832px;
  background-color: #00264e;
}
.right_top {
  position: absolute;
  top: 220px;
  right: 50px;
  width: 455px;
  height: 480px;
  padding: 20px;
  background: url(../../assets/screen/mlxc/small_shadow.png) no-repeat;
  background-size: 100% 100%;
}
.title p:nth-child(2) {
  float: right;
  color: #33eeff;
  text-indent: 3em;
  font-weight: 600;
  font-size: 18px;
  background: url(../../assets/screen/mlxc/arrow.png) no-repeat 0 0px;
}
.details li p {
  width: 100%;
  font-weight: 600;
}
.xc {
  width: 403px;
  height: 196px;
}
.xc swiper-slide img {
  width: 403px;
  height: 196px;
}
.mid_boder {
  margin-top: 20px;
  width: 520px;
  height: 173px;
}
.swiper-container {
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #00ff33; /* 两种都可以 */
}
.mid_boder li {
  float: left;
  margin-right: 35px;
  width: 135px;
  height: 77px;
  margin-bottom: 20px;
  background: url(../../assets/screen/mlxc/kk.png);
}
.mid_boder li {
  display: flex;
  padding: 10px;
}
.mid_boder li img {
  width: 35px;
  height: 30px;
  margin-top: 10px;
  margin-right: 5px;
}

.left_bottom {
  position: absolute;
  top: 730px;
  left: 50px;
  width: 555px;
  height: 320px;
  padding: 20px;
  background: url(../../assets/screen/mlxc/small_shadow.png) no-repeat;
  background-size: 100% 100%;
}

.details li {
  float: left;
  height: 90px;
  width: 89px;
  margin-right: 14px;
  text-indent: 1.2em;
  font-size: 17px;
  color: #fff;
  background: url(../../assets/screen/mlxc/bottom_shadow.png) no-repeat 0 30px;
}
.details li:nth-child(3),
.details li:nth-child(4) {
  text-indent: 1em;
}
.fs_13 {
  font-size: 13px;
  line-height: 20px;
}
.p0 {
  color: #00fffc;
  font-size: 18px;
  font-weight: 600;
}
.p1 {
  color: #00fffc;
  font-weight: 600;
  text-indent: 0.3em;
  font-size: 18px;
}
.p2,
.p3 {
  color: #fff;
}
.p2 {
  font-size: 22px;
  font-weight: 600;
}
</style>